import "./index.less";
import { View } from "@tarojs/components";
import { Button, Image } from "@nutui/nutui-react-taro";
import { pxTransform } from "@tarojs/taro";

function Details({ drinkers }) {
  const src =
    "https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png";
  return (
    <View className="DetailWrap">
      <Image
        src={src}
        height={pxTransform(1080)}
        radius={pxTransform(24)}
        onClick={() => {
          console.log("click image");
        }}
      />
      <h1 className="title">AI识图记录</h1>
      <View className="record">
        <View className="record_title">名称</View>
        <View className="title_content">保温杯</View>
      </View>

      <View className="record">
        <View className="record_title">单词</View>
        <View className="title_content">thermos</View>
      </View>
      <View className="record">
        <View className="record_title">汉字/拼音</View>
        <View className="title_content">
          <View>保 bǎo</View>
          <View>温 wēn</View>
          <View>杯 bēi</View>
        </View>
      </View>
      <View className="record">
        <View
          className="record_title"
          style={{ alignItems: "center", display: "flex" }}
        >
          名称
        </View>
        <View className="title_content" style={{ color: "#C27E32" }}>
          <Button size="mini" type="warning">
            查看故事
          </Button>
        </View>
      </View>
    </View>
  );
}

export default Details;
